<template>
	<view>
		<view class="search_box">
			<uni-search-bar :radius="100" @input="input" cancelButton="none" @confirm="to_goods_list(key)"></uni-search-bar>
			<view @click="to_goods_list(key)" style="margin-left: 8px;">搜索</view>
		</view>
		
		
		<view v-for="(item, i) in searchlist" :key="i" class="search_item" @click="gotodetail(item.id)" v-if="key !== ''">
			<view class="goods_name">{{item.name}} </view>
			<uni-icons type="arrowright" size="16"></uni-icons>
		</view>
		
		<view class="history_box" v-if="key === ''">
			<text>搜索历史</text>
			<uni-icons type="trash" size="20" @click="clear_history"></uni-icons>
		</view>
		<view style="display: flex; margin-top: 5px; flex-wrap: wrap;" v-if="key === ''">
			<uni-tag :text="item" v-for="(item, i) in histories" :key="i" circle="true" 
			customStyle="margin:5px 10px; background-color: #efefef; color: black; font-weight: bold; display:block;"
			@click="to_goods_list(item)"></uni-tag>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				timer: null,
				key: '',
				searchlist: [],
				historylist: [],
				searchres: []
			};
		},
		onLoad() {
			this.historylist = JSON.parse(uni.getStorageSync('store') || '[]')
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		methods: {
			input(e) {
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.key = e.valueOf()
					this.get_searchlist(this.key)
				}, 500)		
			},
			async get_searchlist(item) {
				
				this.searchlist = []
				
				let db = uniCloud.database()
				db.collection('category').get().then(e=>{
					
					let namelist = e.result.data
					
					for(let i = 0; i < namelist.length;i++){
						
						let index0 = namelist[i].name.indexOf(item)
						let index1 = namelist[i].description.indexOf(item)
					
						if(index0 >= 0 || index1 >= 0){
							this.searchlist.push({
								"id": namelist[i]._id,
								"name": namelist[i].name
							})
						}
					}
					
				})
							
				this.get_historylist()
				
			},
			gotodetail(id) {
				uni.navigateTo({
					url: '/subpkg/goods_detail/goods_detail?goods_id=' + id
				})
			},
			get_historylist() {
				const set = new Set(this.historylist)
				set.delete(this.key)
				set.add(this.key)
				this.historylist = Array.from(set)
				uni.setStorageSync('store', JSON.stringify(this.historylist))
			},
			clear_history() {
				this.historylist = []
				uni.setStorageSync('store', '[]')
			},
			async to_goods_list(item) {
				let that = this
				that.searchres = []
				let db = uniCloud.database();
				await db.collection('category').get().then(e=>{			
					let namelist = e.result.data
					
					for(let i = 0; i < namelist.length;i++){
						
						let index0 = namelist[i].name.indexOf(item)
						let index1 = namelist[i].description.indexOf(item)
					
						if(index0 >= 0 || index1 >= 0){
							that.searchres.push(namelist[i]._id)
						}
					}
					
				})
				

				uni.navigateTo({
					url: '/subpkg/floor_goods/floor_goods?query=' + JSON.stringify(this.searchres)
				})
			}
		},
		computed: {
			histories() {
				return [...this.historylist].reverse()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}
	.search_box {
		position: sticky;
		top: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		background-color: #84AF9B;
	}
	.uni-searchbar {
		width: 300px;
		background-color: #84AF9B;
	}
	.search_box > view {
		background-color: #84AF9B;
		font-size: 14px;
		font-weight: bold;
	}
	.search_item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 5px;
		padding: 15px 0;
		font-size: 12px;
		border-bottom: 3rpx solid #efefef;
		
	}
	.goods_name {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;	
	}
	
	.history_box {
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #efefef;
		height: 35px;
		align-items: center;
	}
	


</style>
